<template>
    <div class="shopcar-container">
        <!-- 商品列表项区域 -->
        
        <div class="goods-list" v-for="item in goodslist" :key="item.id">
            <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						 <mt-switch></mt-switch>
                         <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1714666022,3765122183&fm=27&gp=0.jpg" alt="">
                        
                        <div class="info">
                            <h3>这是商品的标题1111111111111111111</h3>
                            <p>
                                <span class="price">￥{{item.price}}</span>
                                <numbox :initcount="$store.getters.getGoodsCount[item.id]"></numbox>
                                <!-- 问题：如何从购物车中获取商品的数量 -->
                                <!-- 1. 可以先创建一个 空对象 -->
                                <a href="#">删除</a>
                            </p>
                        </div>
                    </div>
				</div>
			</div>
        </div>
        <!-- 结算区域 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
                        <mt-switch ></mt-switch>
			    	</div>
				</div>
			</div>
    </div>
</template>

<script>
// 导入 数字选择框 组件
    import numbox from "../subcomponents/shopcar_numbox.vue";
    export default{
        data(){
            return {
                goodslist :[   
                        {id: 1, count: 42, price: 2000, selected: true},
                        {id: 2, count: 42, price: 2000, selected: true},
                        {id: 3, count: 1, price: 2100, selected: true},
                        {id: 4, count: 1, price: 2200, selected: true},
                        {id: 5, count: 1, price: 2300, selected: true},
                        {id: 6, count: 1, price: 2400, selected: true},
                ]// 购物车中所有商品的数据
            }
        },
        created(){
            this.getGoodsList();
        },
        methods:{
            // 获取购物车商品列表
            // 1. 获取到 store 中所有商品的id 然后拼接处一个用逗号分隔的字符串
            getGoodsList(){
                var idArr = [];
                this.$store.state.car.forEach(item=>idArr.push(item.id));
                console.log(idArr)
                // 如果 购物车中没有商品，则直接返回，不需要请求数据接口，否则会报错
                if(idArr.length<=0){
                    return;
                }
                // this.$http.get('api/goods/getshopcarlist/'+idArr.join(",")).then(result=>{
                //     if(result.body.status ===0){
                //         this.goodslist = result.body.message;
                //     }
                // })
            }

        },
        components:{
            numbox
        },

    }



</script>

<style lang="scss" scoped>
    .shopcar-container{
        background-color: #eee;
        overflow: hidden;
        .goods-list{
            .mui-card-content-inner{
                display: flex;
                align-items: center;
                
                img{
                    margin:0 6px;
                    width:60px;
                    height:60px;
                }
                .info{
                    margin:0 6px;
                    h3{font-size: 13px;}
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .price{
                        color:red;
                        font-weight: bold;
                    }
                }
            }
        }


    }
</style>

